﻿<!-- #layout name=default -->
<div id="main" class="offset-top" v-cloak>
  <div k-if="kooboosetting.IsLocal==true" id="isLocal"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="page-header">
          <h1 class="title">Transfer a website</h1>
        </div>
        <kb-form
          simple
          class="form-horizontal"
          :model="model"
          :rules="rules"
          ref="form"
        >
          <div class="note note-info">
            <p>{{Kooboo.text.site.sites.transferAWebsiteTip}}</p>
          </div>
          <kb-form-item class="form-group" prop="url" v-slot="error">
            <div :class="{'has-error' : !!error.error}">
              <label for="url" class="col-md-2 control-label">URL</label>
              <div class="col-md-10">
                <input
                  type="text"
                  class="form-control"
                  placeholder="URL, example: http://www.kooboo.com/"
                  v-kb-focus
                  v-model="model.url"
                  @keydown.enter="handleEnter"
                  v-kb-tooltip:right.manual.error="error.error"
                />
              </div>
            </div>
          </kb-form-item>
          <kb-form-item class="form-group" prop="SiteName" v-slot="error">
            <div :class="{'has-error' : !!error.error}">
              <label for="SiteName" class="col-md-2 control-label"
                >Site name</label
              >
              <div class="col-md-10">
                <input
                  type="text"
                  class="form-control input-medium"
                  placeholder="Site name"
                  v-model="model.SiteName"
                  v-kb-tooltip:right.manual.error="error.error"
                />
                <span class="help-block"
                  >Start with letters and no space allowed.</span
                >
              </div>
            </div>
          </kb-form-item>
          <kb-form-item class="form-group" prop="SubDomain" v-slot="error">
            <div :class="{'has-error' : !!error.error}">
              <label for="SubDomain" class="col-md-2 control-label"
                >Domain</label
              >
              <div class="col-md-10">
                <div class="form-inline">
                  <div style="display: inline-block">
                    <input
                      type="text"
                      class="input-medium form-control"
                      placeholder="SubDomain"
                      v-model="model.SubDomain"
                    />
                    <div class="form-group">
                      <select
                        v-model="model.RootDomain"
                        class="form-control"
                        v-kb-tooltip:right.manual.error="error.error"
                      >
                        <option
                          v-for="$data in domains"
                          :key="$data.domainName"
                          :value="$data.domainName"
                          >{{'.'+$data.domainName}}</option
                        >
                      </select>
                    </div>
                  </div>
                </div>
                <span class="help-block"
                  >Give your site a domain that other people can access.</span
                >
              </div>
            </div>
          </kb-form-item>
          <kb-form-item class="form-group" v-if="isLocal">
            <label class="col-md-2 control-label">Setting</label>
            <div class="col-md-10">
              <div class="radio">
                <label>
                  <input
                    v-model="convertType"
                    name="convertType"
                    type="radio"
                    value="AUTO"
                  /><span>Auto</span>
                </label>
              </div>
              <div class="radio">
                <label>
                  <input
                    v-model="convertType"
                    name="convertType"
                    type="radio"
                    value="SEMI_AUTO"
                  /><span>SemiAuto</span>
                </label>
              </div>
              <div class="radio">
                <label>
                  <input
                    v-model="convertType"
                    name="convertType"
                    type="radio"
                    value="MANUAL"
                  /><span>Manual</span>
                </label>
              </div>

              <div
                v-if="convertType!='AUTO'"
                class="panel panel-default margin-top-10"
              >
                <div class="panel-body">
                  <div class="row">
                    <div
                      :class="{ 'col-md-6': convertType == 'SEMI_AUTO', 'col-md-10': convertType == 'MANUAL'}"
                    >
                      <label for="pages">Pages</label>
                      <input
                        class="form-control"
                        placeholder="pages"
                        v-model="model.totalPages"
                      />
                      <span class="help-block"
                        >Max amount of pages to clone</span
                      >
                    </div>
                    <div v-if="convertType=='SEMI_AUTO'" class="col-md-6">
                      <label for="deeps">Deeps</label>
                      <select class="form-control" v-model="model.depth">
                        <option
                          v-for="item in ['1','2','3','4','5']"
                          :key="item"
                          :value="item"
                          >{{item}}
                        </option>
                      </select>
                      <span class="help-block"
                        >The number of clicks away from the start page</span
                      >
                    </div>
                    <div v-if="convertType=='MANUAL'" class="col-md-2">
                      <label>&nbsp;</label>
                      <button
                        class="btn btn-block green"
                        tabindex="-1"
                        :disabled="!enableScan"
                        @click="scanStart"
                        >Scan</button
                      >
                    </div>
                  </div>
                </div>
                <kb-table
                  :data="urls"
                  show-select
                  :selected.sync="selectedRows"
                  v-if="scanDone"
                >
                  <kb-table-column label="No.">
                    <template v-slot="row">
                      <span>{{row.index}}</span>
                    </template>
                  </kb-table-column>
                  <kb-table-column label="URL">
                    <template v-slot="row">
                      <div style="white-space: nowrap;">
                        <i class="fa fa-file icon-color-blue"></i>
                        {{row.value}}
                      </div>
                    </template>
                  </kb-table-column>
                </kb-table>
              </div>
            </div>
          </kb-form-item>
          <kb-form-item class="form-group" v-else>
            <label class="col-md-2 control-label">Setting</label>
            <div class="col-md-10">
              <p class="form-control-static"
                ><strong
                  >{{Kooboo.text.site.sites.onlineVersionCloneTip}}</strong
                ></p
              >
            </div>
          </kb-form-item>
          <ul class="pager">
            <li class="previous"
              ><a @click.prevent="SPAClick" class="btn gray">Return</a></li
            >
            <li class="next start">
              <button
                class="btn blue"
                @click="startConvert"
                :disabled="startDisabled"
                >Start</button
              >
            </li>
          </ul>
        </kb-form>
      </div>
    </div>
  </div>
</div>
<style>
  .header-abs {
    position: absolute;
    z-index: 200000;
  }
</style>
<script>
  Kooboo.loadJS([
    "/_Admin/Scripts/SPA.js",
    "/_Admin/Scripts/components/kbForm.js",
    "/_Admin/Scripts/components/kbTable.js"
  ]);
  var doubleSuffix = [
    ".co.uk",
    ".org.uk",
    ".ltd.uk",
    ".plc.uk",
    ".me.uk",
    ".br.com",
    ".cn.com",
    ".eu.com",
    ".hu.com",
    ".no.com",
    ".qc.com",
    ".sa.com",
    ".se.com",
    ".se.net",
    ".us.com",
    ".uy.com",
    ".co.ac",
    ".gv.ac",
    ".or.ac",
    ".ac.ac",
    ".ac.at",
    ".co.at",
    ".gv.at",
    ".or.at",
    ".asn.au",
    ".com.au",
    ".edu.au",
    ".org.au",
    ".net.au",
    ".id.au",
    ".ac.be",
    ".adm.br",
    ".adv.br",
    ".am.br",
    ".arq.br",
    ".art.br",
    ".bio.br",
    ".cng.br",
    ".cnt.br",
    ".com.br",
    ".ecn.br",
    ".eng.br",
    ".esp.br",
    ".etc.br",
    ".eti.br",
    ".fm.br",
    ".fot.br",
    ".fst.br",
    ".g12.br",
    ".gov.br",
    ".ind.br",
    ".inf.br",
    ".jor.br",
    ".lel.br",
    ".med.br",
    ".mil.br",
    ".net.br",
    ".nom.br",
    ".ntr.br",
    ".odo.br",
    ".org.br",
    ".ppg.br",
    ".pro.br",
    ".psc.br",
    ".psi.br",
    ".rec.br",
    ".slg.br",
    ".tmp.br",
    ".tur.br",
    ".tv.br",
    ".vet.br",
    ".zlg.br",
    ".ab.ca",
    ".bc.ca",
    ".mb.ca",
    ".nb.ca",
    ".nf.ca",
    ".ns.ca",
    ".nt.ca",
    ".on.ca",
    ".pe.ca",
    ".qc.ca",
    ".sk.ca",
    ".yk.ca",
    ".ac.cn",
    ".com.cn",
    ".edu.cn",
    ".gov.cn",
    ".org.cn",
    ".bj.cn",
    ".sh.cn",
    ".tj.cn",
    ".cq.cn",
    ".he.cn",
    ".nm.cn",
    ".ln.cn",
    ".jl.cn",
    ".hl.cn",
    ".js.cn",
    ".zj.cn",
    ".ah.cn",
    ".gd.cn",
    ".gx.cn",
    ".hi.cn",
    ".sc.cn",
    ".gz.cn",
    ".yn.cn",
    ".xz.cn",
    ".sn.cn",
    ".gs.cn",
    ".qh.cn",
    ".nx.cn",
    ".xj.cn",
    ".tw.cn",
    ".hk.cn",
    ".mo.cn",
    ".com.ec",
    ".tm.fr",
    ".com.fr",
    ".asso.fr",
    ".presse.fr",
    ".co.il",
    ".net.il",
    ".ac.il",
    ".k12.il",
    ".gov.il",
    ".muni.il",
    ".ac.in",
    ".co.in",
    ".org.in",
    ".ernet.in",
    ".gov.in",
    ".net.in",
    ".res.in",
    ".ac.jp",
    ".co.jp",
    ".go.jp",
    ".or.jp",
    ".ne.jp",
    ".ac.kr",
    ".co.kr",
    ".go.kr",
    ".ne.kr",
    ".nm.kr",
    ".or.kr",
    ".asso.mc",
    ".tm.mc",
    ".com.mm",
    ".org.mm",
    ".net.mm",
    ".edu.mm",
    ".gov.mm",
    ".org.ro",
    ".store.ro",
    ".tm.ro",
    ".firm.ro",
    ".www.ro",
    ".arts.ro",
    ".rec.ro",
    ".info.ro",
    ".nom.ro",
    ".nt.ro",
    ".com.sg",
    ".org.sg",
    ".net.sg",
    ".gov.sg",
    ".ac.th",
    ".co.th",
    ".go.th",
    ".mi.th",
    ".net.th",
    ".or.th",
    ".com.tr",
    ".edu.tr",
    ".gov.tr",
    ".k12.tr",
    ".net.tr",
    ".org.tr",
    ".com.tw",
    ".org.tw",
    ".net.tw",
    ".ac.uk",
    ".uk.com",
    ".uk.net",
    ".gb.com",
    ".gb.net",
    ".com.hk",
    ".org.hk",
    ".net.hk",
    ".edu.hk",
    ".eu.lv",
    ".co.nz",
    ".org.nz",
    ".net.nz",
    ".maori.nz",
    ".iwi.nz",
    ".com.pt",
    ".edu.pt",
    ".com.ve",
    ".net.ve",
    ".org.ve",
    ".web.ve",
    ".info.ve",
    ".co.ve",
    ".net.ru",
    ".org.ru",
    ".com.hr",
    ".net.cn",
    ".com.ag",
    ".net.ag",
    ".org.ag",
    ".com.bz",
    ".net.bz",
    ".com.co",
    ".net.co",
    ".nom.co",
    ".com.es",
    ".nom.es",
    ".org.es",
    ".firm.in",
    ".gen.in",
    ".ind.in",
    ".com.mx",
    ".idv.tw"
  ];

  var self = new Vue({
    el: "#main",
    data: function() {
      return {
        model: {
          url: "",
          RootDomain: "",
          SubDomain: "",
          SiteName: "",
          totalPages: 20,
          depth: "2"
        },
        rules: {
          url: [
            { required: Kooboo.text.validation.required },
            {
              pattern: /[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/,
              message: Kooboo.text.validation.urlInvalid
            }
          ],
          SiteName: [
            { required: Kooboo.text.validation.required },
            {
              pattern: /^[A-Za-z][\w\-]*$/,
              message: Kooboo.text.validation.siteNameInvalid
            },
            {
              remote: {
                url: Kooboo.Site.isUniqueName(),
                data: function() {
                  return {
                    name: self.model.SiteName
                  };
                }
              },
              message: Kooboo.text.validation.taken
            }
          ],
          SubDomain: [
            { required: Kooboo.text.validation.required },
            {
              min: 1,
              max: 63,
              message:
                Kooboo.text.validation.minLength +
                1 +
                ", " +
                Kooboo.text.validation.maxLength +
                63
            },
            {
              pattern: /^[A-Za-z][\w\-]*$/,
              message: Kooboo.text.validation.siteNameInvalid
            },
            {
              remote: {
                url: Kooboo.Site.CheckDomainBindingAvailable(),
                data: function() {
                  return {
                    SubDomain: self.model.SubDomain,
                    RootDomain: self.model.RootDomain
                  };
                }
              },
              message: Kooboo.text.validation.taken
            }
          ]
        },
        convertType: "AUTO",
        enableScan: false,
        domains: [],
        urls: [],
        selectedRows: [],
        scanDone: false,
        isLocal: false
      };
    },
    mounted: function() {
      var self = this;
      self.isLocal = document.getElementById("isLocal");
      $.when(Kooboo.Domain.getAvailable()).then(function(availableRes) {
        if (availableRes.success) {
          self.domains = availableRes.model;
          if (self.domains.length) {
            self.model.RootDomain = self.domains[0].domainName;
          }
          $("#component_container_header").addClass("header-abs");
        }
      });
      if (!self.isLocal) self.convertType = "ONLINE";
    },
    computed: {
      startDisabled: function() {
        return this.convertType == "MANUAL" && !this.selectedRows.length;
      }
    },
    methods: {
      handleEnter: function(e) {
        e.target.blur();
        if (self.convertType == "AUTO" || self.convertType == "SEMI_AUTO") {
          self.startConvert();
        } else if (self.convertType == "MANUAL") {
          self.scanStart();
        }
      },
      SPAClick: function() {
        self.$refs.form.clearValid();
        self.$nextTick(function() {
          Kooboo.SPA.getView(Kooboo.Route.Site.ListPage, {
            container: '[layout="default"]'
          });
          $("#component_container_header").removeClass("header-abs");
        });
      },
      startConvert: function() {
        if (self.$refs.form.validate()) {
          switch (self.convertType) {
            case "AUTO":
            case "ONLINE":
              Kooboo.Transfer.byLevel({
                RootDomain: self.model.RootDomain,
                SubDomain: self.model.SubDomain,
                SiteName: self.model.SiteName,
                url: self.model.url
              }).then(function(res) {
                if (res.success) {
                  location.href = Kooboo.Route.Get(
                    Kooboo.Route.Site.Transferring,
                    {
                      TaskId: res.taskId,
                      SiteId: res.siteId
                    }
                  );
                }
              });
              break;
            case "SEMI_AUTO":
              Kooboo.Transfer.byLevel({
                RootDomain: self.model.RootDomain,
                SubDomain: self.model.SubDomain,
                SiteName: self.model.SiteName,
                url: self.model.url,
                TotalPages: self.model.totalPages,
                Depth: self.model.depth
              }).then(function(res) {
                if (res.success) {
                  location.href = Kooboo.Route.Get(
                    Kooboo.Route.Site.Transferring,
                    {
                      TaskId: res.taskId,
                      SiteId: res.siteId
                    }
                  );
                }
              });
              break;
            case "MANUAL":
              Kooboo.Transfer.byPage({
                SubDomain: self.model.SubDomain,
                RootDomain: self.model.RootDomain,
                SiteName: self.model.SiteName,
                Urls: self.selectedRows.map(function(m) {
                  return m.value;
                })
              }).then(function(res) {
                if (res.success) {
                  location.href = Kooboo.Route.Get(
                    Kooboo.Route.Site.Transferring,
                    {
                      TaskId: res.taskId,
                      SiteId: res.siteId
                    }
                  );
                }
              });
              break;
          }
        } else {
          $("body").animate(
            {
              scrollTop: 0
            },
            100
          );
        }
      },
      scanStart: function() {
        Kooboo.Transfer.getSubUrl({
          url: self.model.url,
          pages: self.model.totalPages
        }).then(function(res) {
          if (res.success) {
            self.scanDone = true;

            for (let index = 0; index < res.model.length; index++) {
              res.model[index] = {
                index: index + 1,
                value: res.model[index]
              };
            }

            self.urls = res.model;
            self.selectedRows = [];
          }
        });
      }
    },
    watch: {
      "model.url": function(value) {
        self.enableScan = Kooboo.validField(value, this.rules.url).valid;
        var tempName = "",
          isDouble = false;
        try {
          var url = new URL(value);
          tempName = url.host;
        } catch (ex) {
          if (Kooboo.BrowserInfo.getBrowser() == "ie") {
            var parser = document.createElement("a");
            parser.href = value;
            tempName = parser.hostname;
          }
        } finally {
          doubleSuffix.forEach(function(suffix) {
            if (
              tempName.indexOf(suffix, tempName.length - suffix.length) !== -1
            ) {
              isDouble = true;
              tempName = tempName.substr(0, tempName.lastIndexOf(suffix));
            }
          });

          var pureNameArray = tempName.split("."),
            pureName =
              pureNameArray[pureNameArray.length - 2 + (isDouble ? 1 : 0)];
          self.model.SiteName = pureName || "";
        }
      },
      "model.SiteName": function(value) {
        self.model.SubDomain = value;
      },
      convertType: function() {
        self.urls = [];
        self.scanDone = false;
        self.selectedRows = [];
      }
    }
  });
</script>
